<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假信息管理系统 -- 修改辅导员</title>
    <script src="../../../js/jquery.min.js"></script>
    <link href="../../../css/instructorManage/editInstructor.css" rel="stylesheet">
    <link href="../../../css/common/common.css" rel="stylesheet">
</head>
<body>
<!-- 顶部弹出提示信息容器 -->
<div id="notification" class="notification">
    <span id="message"></span>
</div>
<!-- 头部 -->
<header th:insert="~{common/common::header}">
</header>
<!-- 左边 -->
<aside th:insert="~{common/common::aside}">
</aside>
<!-- 中间 -->
<main class="main">
    <form action="/instructor/updateInstructor" id="instructorFromFrom">
        <h2 style="margin: 20px 30%;">修改辅导员信息</h2>
        <input name="oldId" th:value="${instructorOne.instID}" style="display: none">
        <div class="form-group">
            <label for="instId">辅导员编号</label>
            <input type="text" id="instId" name="instID" required th:value="${instructorOne.instID}">
        </div>
        <div class="form-group">
            <label for="password">账号密码</label>
            <input type="text" id="password" name="password" required th:value="${instructorOne.password}">
        </div>
        <div class="form-group">
            <label for="instName">辅导员名称</label>
            <input type="text" id="instName" name="instName" required th:value="${instructorOne.instName}">
        </div>

        <div class="form-group">
            <label for="depId">二级学院名称
                <select id="depId" name="depID" style="width: 400px;height: 40px;">
                    <option>==请选择二级学院==</option>
                </select>
            </label>
        </div>

        <div class="form-group">
            <label for="telephone">联系方式</label>
            <input type="text" id="telephone" name="telephone" required th:value="${instructorOne.telephone}">
        </div>
        <input type="button" value="返回" onclick="goBack()">
        <input type="button" value="保存提交" onclick="editInstructor()">
    </form>

</main>
</body>

<script th:inline="javascript" type="text/javascript">
    function goBack(){
        window.location.href = '/instructor/list?pageSize=7&pageNum=1'
    }
    var ids = [[${instIds}]];
    console.log(ids)
    var oldId = [[${instructorOne.instID}]]

    function editInstructor(){
        var instId = document.getElementById("instId").value;
        var telephone = document.getElementById("telephone").value;
        console.log(oldId)
        for(var id in ids){
            console.log(id)
            if(instId === ids[id] && instId != oldId){
                document.getElementById("message").innerHTML = "编号已存在，请重新输入";
                this.showNotification();
                return false;
            }
        }

        var depInfo = document.getElementById("depId").value;
        if (depInfo == "==请选择二级学院=="){
            document.getElementById("message").innerHTML = "请选择二级学院";
            this.showNotification();
            return false;
        }

        if (!validatePhoneNumber(telephone)){
            document.getElementById("message").innerHTML = "电话号码格式不正确，请重新输入";
            this.showNotification();
            return false;
        }

        document.getElementById("instructorFromFrom").submit();
    }

    var depList = [[${depList}]];
    var depName = []
    depList.forEach(item => {
        depName.push({
            "label" : item.depName,
            "value" : item.depID
        })
    })
    var selectElement = document.getElementById("depId");
    depName.forEach(option => {
        var optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.label;
        selectElement.appendChild(optionElement);
        if(option.value === [[${instructorOne.depID}]]){
            optionElement.selected = true;
        }
    })

    function validatePhoneNumber(phoneNumber) {
        // 中国的电话号码正则表达式
        const phoneRegex = /^1[3-9]\d{9}$/;

        if (phoneRegex.test(phoneNumber)) {
            return true;
        } else {
            return false;
        }
    }

    function showNotification() {
        const notification = document.getElementById("notification");
        notification.classList.add("show");

        setTimeout(function() {
            notification.classList.remove("show");
        }, 1000); // 3秒后自动消失
    }

    function outLogin(){
        location.href = '/outLogin'
    }
</script>

</html>